<template>
  <TabLayout>
    <template #header>
      <ExpirySubsection @change="handleSubsectionChange"></ExpirySubsection>
      <uni-search-bar placeholder="请输入条形码、名称" @confirm="handleSearch"
                      v-model="keyword" cancelButton="none" clearButton="auto">
        <template v-slot:searchIcon>
          <uni-icons @click="handleScan" color="#999999" size="25" type="scan"/>
        </template>
      </uni-search-bar>
    </template>
    <movable-area class="h-full w-full">
      <movable-view x="30" y="1000" :out-of-bounds="false" class="z-50" direction="all">
        <uni-fab @fabClick="handleAdd"></uni-fab>
      </movable-view>
      <scroll-view scroll-y="true" @scrolltolower="handleMore" class="h-full">
        <view v-for="(item,index) in expiryList" :key="index" @click="handleSelect(item)">
          <ExpiryItem :expiry="item" :selected="selectedExpiry" @manage="handleManage"></ExpiryItem>
        </view>
        <uni-load-more :status="loadMoreStatus"></uni-load-more>
      </scroll-view>
    </movable-area>


  </TabLayout>
</template>
<script setup lang="ts">

import TabLayout from "@/pages/product/components/TabLayout.vue";
import {computed, onMounted, ref} from "vue";
import api from "@/api";
import {useProductStore} from "@/store/product";
import {storeToRefs} from "pinia";
import ExpiryItem from "@/pages/product/expiry/components/ExpiryItem.vue";
import ExpirySubsection from "@/pages/product/expiry/components/ExpirySubsection.vue";
import MyDayjs from "@/utils/common/myDayjs";
import {onPullDownRefresh} from "@dcloudio/uni-app";

const productStore = useProductStore()
const {expiryList, expiryTotal, selectedExpiry, editMode} = storeToRefs(productStore)

const loadMoreStatus = computed((() => {
  if (expiryTotal.value > expiryList.value.length) {
    return 'more'
  } else {
    return 'no-more'
  }
}))
const keyword = ref('')
const pageNo = ref(1)
const pageSize = ref(10)
const orParams = computed(() => {
  return {
    barcode: `%${keyword.value}%`,
    name: `%${keyword.value}%`
  }
})
const andParams = ref({})
const orderParams = ref({
  expiryDate: '升序',
  updatedAt: '降序',
})
onMounted(() => {
  expiryList.value = []
  getList()
})
const getList = () => {
  api.expiry.queryList({
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    orParams: JSON.stringify(orParams.value),
    andParams: JSON.stringify(andParams.value),
    orderParams: JSON.stringify(orderParams.value)
  }).then((res: any) => {
    expiryList.value = expiryList.value.concat(res.data.data.records)
    expiryTotal.value = res.data.data.total
  })
}
const handleSearch = () => {
  expiryTotal.value = 0
  expiryList.value = []
  pageNo.value = 1
  getList()
}
const handleScan = () => {
  uni.scanCode({
    scanType: ['barCode'],
    success: (res) => {
      keyword.value = res.result
      handleSearch()
    }
  })
}
const handleSelect = (item: IExpiry) => {
  selectedExpiry.value = item
}
const handleManage = (item: IExpiry) => {
  selectedExpiry.value = item
  editMode.value = 'update'
  uni.navigateTo({
    url: `/pages/product/expiry/expiryEdit`
  })
}
const handleAdd = () => {
  selectedExpiry.value = <IExpiry>{}
  editMode.value = 'add'
  uni.navigateTo({
    url: `/pages/product/expiry/expiryEdit`
  })
}
const handleMore = () => {
  if (expiryTotal.value > expiryList.value.length) {
    pageNo.value++
    getList()
  }
}

const handleSubsectionChange = (e: any) => {
  if (e === '已过期') {
    andParams.value = {
      expiryDate: `<${MyDayjs().format('YYYY-MM-DD')}`
    }
  } else if (e === '快过期') {
    andParams.value = {
      warningDate: `<${MyDayjs().format('YYYY-MM-DD')}`,
      expiryDate: `>=${MyDayjs().format('YYYY-MM-DD')}`
    }
  } else if (e === '正常') {
    andParams.value = {
      warningDate: `>=${MyDayjs().format('YYYY-MM-DD')}`,
      expiryDate: `>=${MyDayjs().format('YYYY-MM-DD')}`
    }
  } else {
    andParams.value = {}
  }
  handleSearch()
}
onPullDownRefresh(() => {
  handleSearch()
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 200);
})

</script>


<style scoped>

</style>